<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul{
				width: 600px;
				border: 10px solid red;
				/*将ul设置为弹性容器*/
				display: flex;
				
				/*
				 flex-diretion 指定容器中弹性元素的排列方式
				   可选值：
				      row 默认值，弹性元素在容器中水平排列（左向右）
				        -主轴 自左向右
				      row-reverse 弹性元素在容器中反向水平排列（右向左）
				        -主轴 自右向左
				      column 弹性元素纵向排列 （自上向下）
				       -主轴 自上向下
				      column-reverse 弹性元素方向纵向排列（自下向上）
				        -主轴自下向上
				        
				        * 
				       主轴：
				         弹性元素的排列方式成为主轴
				    
				      侧轴
				      与主轴垂直方向的成为侧轴*/
				     
				     flex-direction: row;
				     /*flex-shrink: 0;*/
				     
			}
			
			li{
				width: 100px;
				height: 100px;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				background-color: #bfa;
				
				/*
				 弹性元素的属性
				   flex-grow  指定弹性元素的伸展的系数
				   -当父元素有多余空间的时候，子元素如何伸展
				   -父元素的剩余空间，会按照比例进行分配
				   
				   flex-shrink 指定弹性元素的收缩系数
				   -当父元素中的空间不足以容纳所有的子元素时，如果对于元素进行收缩
				   */
				  /*flex-grow: 1;*/
				flex-shrink: 0;
				 
				 
			}
			
			li:nth-child(1){
				/*flex-grow: 0;*/
				flex-shrink: 2;
				
			}
			li:nth-child(2){
				background-color: pink;
				/*flex-grow: 2;*/
				flex-shrink: 3;
				
			}
			
			li:nth-child(3){
				background-color: yellowgreen;
				/*flex-grow: 3;*/
				flex-shrink: 1;
				
				
			}
		</style>
	</head>
	<body>
		<!--
			flex（弹性盒、伸缩盒）
			  -是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
			  -flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
			  -弹性容器
			    -要使用弹性盒，必须先将一个元素设置为弹性容器
			    -我们通过display 来设置弹性容器
			      display：flex 设置为块级弹性容器
			      display：inline-flex设置为行内弹性容器
			      
			    弹性元素：
			      -弹性容器的子元素是弹性元素（弹性项）
			      -一个元素可以同时是弹性容器和弹性元素
		-->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>
